<template>
	<view class="page">
		<back-top v-if="showTop"></back-top>
		<view class="top-box">
			<view class="search-box flex-box align-center">
				<view class="flex-box align-center flex">
					<text class="iconfont icon-search"></text>
					<input type="text" v-model="keywords" placeholder="输入姓名、电话、订单号查询"
					 @confirm="comfirm" confirm-type="search"
					 class="flex" placeholder-class="pla"/>
				</view>
				<view class="scan-box flex-box align-center" @click="scan">
					<image src="/static/icon/icon-scan.png" class="icon-sacn"></image>
					<!-- <text>扫一扫</text> -->
				</view>
			</view>
			
			<view class="tabs">
				<u-tabs :list="tabs" lineColor="#FF784A"  
				     :activeStyle="activeStyle" lineWidth="30" :current="current" @click="change"></u-tabs>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,i) in list" :key='i' :class="{active: itemCurrent == i}" @click="toUrl('/pages/order/detail?id='+item.order_id)">
				<view class="no flex-box flex-between">
					<view class="code">单号：{{ item.order_code }}</view>
					<text v-if='item.state == 0'>未支付</text>
					<text v-if='item.state == 1 && item.delivery == 1'>待发货</text>
					<text v-if='item.state == 1 && item.delivery == 2'>待备货</text>
					<text v-if='item.state == 2 && item.delivery == 1'>已发货</text>
					<text v-if='item.state == 2 && item.delivery == 2'>待取货</text>
					<text v-if='item.state == 3'>待确认</text>
					<text v-if='item.state == 4' class='st1'>待评价</text>
					<text v-if='item.state == 5'>已评价</text>
					<text v-if='item.state == 6'>退款中</text>
					<text v-if='item.state == 96' class='st1'>已退款</text>
					<text v-if='item.state == 97'>已失效</text>
					<text v-if='item.state == 98'>已取消</text>
				</view>
				<view v-if="item.siteName">宴会名称：{{ item.siteName }}</view>
				<view v-if="item.table_name">桌号：{{ item.table_name }}</view>
				<view v-if="item.open_date">开宴时间：{{ item.open_date }}</view>
				
				<view class="flex-box flex-between">
					<view>{{ item.add_time }}</view>
					<view>
						<text class='tag' v-if='item.type == 1'>特价</text>
						<text class='tag' v-if='item.type == 2'>团购</text>
						<text class='log' v-if='item.delivery == 1 && item.state == 3'>物流</text>
						<text class='log' v-if='item.delivery == 2'>自提</text>
					</view>
				</view>
				<view>{{ item.uname }}（{{ item.utel }}）</view>
				<view v-if='item.address'>{{ item.address }}</view>
				<view class="remarks" v-if='item.remarks'>{{ item.remarks }}</view>
				<view class="btns flex-box align-center">
					<text class="iconfont icon-down" v-if='item.remarks' @click.stop="itemCurrent = itemCurrent==i?-1:i"></text>
					<view class="flex-box flex">
						<view class="btn" @click.stop="contact(item)">联系客户</view>
						<view class="btn1" v-if='item.state == 1 && item.delivery == 1' @click.stop="toUrl('/pages/order/sendOut?order_id='+item.order_id)">去发货</view>
						<view class="btn1" v-if='item.state == 6' @click.stop="backOff(item.order_id,i)">确定退单</view>
						<view class="btn1" v-if='item.state == 1 && item.delivery == 2' @click.stop="Stockup(item.order_id,i)">备货完成</view>
						<!-- <view class="btn1" v-if='item.state == 2'>扫码核销</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="DiLine" v-if='showDiLine'>------- 我也是有底线的 -------</view>
		<empty type='1' v-if='noData' :msg='"没有相关的"+tabs[current].name+"订单哦"'></empty>
	</view>
</template>

<script>
	var that;
	import wx from 'jweixin-module'
	export default {
		data() {
			return {
				showTop: false,
				current:0,
				tabs:[
					{name:'待处理',state:'1'},
					{name:'待完成',state:'2'},
					{name:'已完成',state:'4'},
					{name:'未支付',state:'0'},
					{name:'已退款',state:'96'},
					{name:'已失效',state:'97'},
				],
				activeStyle:{
					color:'#FF784A',
				},
				current:0,
				itemCurrent: -1,
				state: '1',
				limit: 10,
				page: 1,
				list:[],
				noData: false,
				more:false,
				showDiLine: false,
				keywords:'',
				service_state:0
			};
		},
		onShow() {
			uni.removeStorageSync('scanState');
		},
		onLoad(e) {
			that = this;
			if(e.state){
				that.state = e.state
				that.tabs.forEach((item,i)=>{
					if(item.state == that.state){
						that.current = i
					}
				})
			}
			that.getList()
			this.$http.get({
				url: '/singleSaleManageApi/getJsConfig?url=https://sra.mogoie.com/singleSaleShopH5/adminH5/'
			}).then(res => {
				if (res) {
					wx.config(res);
				}
			})
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		onPageScroll(e) {
			if(e.scrollTop > 520){
				that.showTop = true
			}else{
				that.showTop = false
			}
		},
		onReachBottom() {
			if(that.more){
				that.getList()
			}
		},
		methods:{
			contact(item){
				if(that.service_state == 1){// 开启了客服系统
					that.toUrl('/pages/message/consult?id='+item.v_id)
				}else{
					uni.makePhoneCall({
						phoneNumber: item.utel
					})
				}
			},
			scan(){
				wx.scanQRCode({
				  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				  success: function (res) {
					 var result = res.resultStr;
					 uni.showToast({
					 	title: res,
						duration: 20000
					 })
					 that.$http.get({
					 	url: '/singleSaleManageApi/scan',
					 	data:{
							code: result,
					 		shop_id: uni.getStorageSync('store_id')
					 	}
					 }).then(res => {
						 if(res.code == 200 && res.data){
							if(res.data.type == 'sncode'){
								that.toUrl('/pages/appointment/detail?id='+res.data.id)
							}
							if(res.data.type == 'order'){
								uni.setStorageSync('scanState','1')
							 	that.toUrl('/pages/order/detail?id='+res.data.id)
							}
						 }else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							}) 
						}
					 }) 
				  }
				})
			},
			comfirm(){
				if(that.keywords.trim()){
					uni.navigateTo({
						url:'search?key='+that.keywords
					})
				}else{
					uni.showToast({
						title:'请先输入搜索关键词',icon:'none'
					})
				}
			},
			backOff(order_id,index){
				uni.showModal({
				    title: '是否已收到退货商品？',
				    content: '确定退单后，退款金额将原路退返客户',
					confirmText:'确定退单',
					cancelColor:"#999999",
					confirmColor: "#FF784A",
				    success: function (res) {
						that.$showLoading('');
				        if (res.confirm) {
				            that.$http.post({
				            	url: '/singleSaleManageApi/singleSaleRefuse',
				            	data:{
				            		shop_id: uni.getStorageSync('store_id'),
				            		order_id: order_id
				            	}
				            }).then(res => {
								that.$hideLoading();
								if(res.code != '200') return that.$Toast(res.msg);
				            	that.list.splice(index,1)
				            	if(that.list.length < 1 || !that.list){
				            		that.noData = true
				            	}
								uni.showToast({
									title: res.msg,
									icon:'none'
								})
				            })
				        }
				    }
				});
			},
			Stockup(order_id,index){
				uni.showModal({
				    title: '是否确定已备货完成？',
				    content: '备货完成后用户将随时抵达提货',
					confirmText:'备货完成',
					cancelColor:"#999999",
					confirmColor: "#FF784A",
				    success: function (res) {
				        if (res.confirm) {
				            that.$http.post({
				            	url: '/singleSaleManageApi/prepareGoods',
				            	data:{
				            		shop_id: uni.getStorageSync('store_id'),
				            		order_id: order_id
				            	}
				            }).then(res => {
				            	if (res.code == 200) {
				            		that.list.splice(index,1)
									if(that.list.length < 1 || !that.list){
										that.noData = true
									}
				            	}else{
									uni.showToast({
										title: res.msg,
										icon:'none'
									})
								}
				            })
				        }
				    }
				});
			},
		
			change(e){
				that.current = e.index;
				that.state = e.state;
				that.page = 1;
				that.list = [];
				that.getList()
			
			},
			getList(){
				that.noData = false
				that.more = false
				that.showDiLine = false
				that.$http.get({
					url: '/singleSaleManageApi/orderList',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						state: that.state,
						page: that.page,
						limit: that.limit,
					}
				}).then(res => {
					if(res.data){
						that.list = that.list.concat(res.data)
						if(res.data.length >= that.limit){
							that.more = true
							that.page ++
						}
						
					}
				
					res.orderCount.forEach(item=>{
						if(item.num){
							item.badge = {value:parseInt(item.num)}
						}
					})
					that.tabs = res.orderCount;
				
					that.service_state = res.service_state
					if(that.list.length >= that.limit && !that.more){
						that.showDiLine = true
					}
					if(!that.list || that.list.length < 1){
						that.noData = true
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	padding-top: 172rpx;
	view{
		font-size: 28rpx;
	}
	.top-box{
		position: fixed;
		top: 0;
		width: 100%;
		height: 172rpx;
		z-index: 3;
		background-color: #FFFFFF;
		.search-box{
			height: 88rpx;
			padding-left: 30rpx;
			.flex{
				background-color: #F5F5F5;
				height: 56rpx;
				border-radius: 28rpx;
				padding: 0 28rpx;
				.icon-search{
					color: #999999;
					font-size: 32rpx;
				}
				.pla {
					font-size: 26rpx;
				}
				input{
					font-size: 26rpx;
					padding: 0 10rpx;
				}
			}
			.scan-box{
				padding: 0 30rpx;
				text{
					font-size: 28rpx;
				}
				.icon-sacn{
					width: 36rpx;
					height: 36rpx;
					// margin-right: 10rpx;
				}
			}
		}
	
		.tabs{
			justify-content: space-around;
			.tab{
				flex: 1;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
			}
			.active{
				font-size: 32rpx;
				font-weight: 600;
				color: $uni-color-primary;
			}
			position: relative;
			.tag{
				position: absolute;
				bottom: 0;
				height: 4rpx;
				border-radius: 4rpx;
				width: 80rpx;
				background-color: $uni-color-primary;
				left: 10%;
				margin-left: -40rpx;
				transition: all .2s;
			}
		}
	}
	.list{
		padding: $page-space;
		.item{
			background-color: #FFFFFF;
			padding: 24rpx $page-space 0;
			border-radius: $border-radius-sm;
			margin-bottom: $page-space;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				width: 4rpx;
				height: 24rpx;
				background-color: $uni-color-primary;
				left: 0;
				top: 32rpx;
				border-radius: 0 4rpx 4rpx 0;
			}
			text{
				font-size: 28rpx;
				color: #FF6C6C;
			}
			.st1{
				color: #999999;
			}
			.no{
				view{
					font-weight: 600;
				}
			}
			>view{
				margin-bottom: 15rpx;
			}
			.log{
				background-color: #90CFFF;
				color: white;
				font-size: 24rpx;
				padding: 2rpx 6rpx;
				border-radius: 4rpx;
				margin-left: 20rpx;
			}
			.tag{
				background-color: #F6B081;
				color: white;
				font-size: 24rpx;
				padding: 2rpx 6rpx;
				border-radius: 4rpx;
				
			}
			.remarks{
				color: #999999;
				margin-bottom: 20rpx;
				height: 0;
				overflow: hidden;
				transition: all .3s;
			}
			&.active{
				.remarks{
					height: auto;
				}
				.icon-down{
					transform: rotate(180deg);
				}
			}
			.btns{
				margin-left: -$page-space;
				margin-right: -$page-space;
				height: 104rpx;
				border-top: 1px solid #F5F5F5;
				padding: 0 $page-space 0 0;
				.icon-down{
					color: #999999;
					font-size: 26rpx;
					padding: 20rpx $page-space;
					transition: all .2s;
				}
				>view{
					justify-content: flex-end;
					flex-wrap: wrap;
					.btn{
						margin-left: 20rpx;
						line-height: 56rpx;
						color: #999999;
						border: 1px solid #afafaf;
						border-radius: 56rpx;
						padding: 0 24rpx;
					}
					.btn1{
						margin-left: 20rpx;
						line-height: 56rpx;
						color: #FFFFFF;
						border: 1px solid $uni-color-primary;
						background-color: $uni-color-primary;
						border-radius: 56rpx;
						padding: 0 24rpx;
					}
				}
			}
		}
	}
}
</style>
